<template>
  <div class="singer-top">
    <div class="left">
      <div
        class="mark"
        :style="{
          backgroundImage: `url(${singerTop.backgroundImage})`,
          backgroundSize: '100%',
          backgroundRepeat: 'no-repeat'
        }"
      />
      <img :src="singerTop.coverImgUrl" alt="">
      <span class="update-time">{{singerTop.updateTime}}更新</span>
    </div>
    <ul class="right">
      <li class="singerItem" v-for="(singer, index) of singerTop.artistsList"  @click="selectSinger(singer.id)" :key="singer">
        <span class="index" :class="{ 'top': index < 3 }">{{index + 1}}</span>
        -
        <span class="singer-name">{{singer.name}}</span>
      </li>
      <li class="look-all">
        <div class="box">
          <span>查看全部</span>
          <i class="iconfont iconyou"></i>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { useRouter } from 'vue-router'

export default {
  name: 'SingerTop',
  props: {
    singerTop: {
      type: Object,
      default: () => ({})
    }
  },
  setup () {
    const router = useRouter()
    const selectSinger = (id) => {
      router.push({ name: 'singerDetail', params: { id } })
    }
    return {
      selectSinger
    }
  }
}
</script>

<style lang="scss" scoped>
.singer-top {
    display: flex;
    width: 100%;
    margin-bottom: 15px;

    .left {
      position: relative;
      height: 172px;
      width: 172px;
      border-radius: 5px;
      overflow: hidden;
      color: #ffffff;
      font-size: 12px;
      text-align: center;
      cursor: pointer;

      .mark {
        filter: blur(2px);
        width: 100%;
        height: 100%;
      }

      >img {
        position: absolute;
        top: 0;
        left: 0;
        width: 172px;
        height: 172px;
        border-radius: 5px;
        opacity: .8;
      }

      .update-time {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 25px;
      }
    }

    .right {
      flex: 1;
      padding-left: 20px;
      box-sizing: border-box;

      >li {
        height: 35px;
        font-size: 13px;
        border-radius: 3px;
        cursor: default;
      }

      >li:nth-of-type(odd) {
        background-color: #f4f4f4;
      }

      .singerItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #989898;
        line-height: 1.4;

        .index {
          padding-left: 5px;
          padding-right: 5px;
          font-weight: 600;
        }

        .top {
          color: #ec4141;
        }

        .singer-name {
          flex: 1;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          padding-left: 5px;
          padding-right: 10px;
          color: #333333;
        }

        &:hover {
          background-color: #ebebeb;
        }
      }

      .look-all {
        line-height: 35px;

        .box {
          display: flex;
          align-items: center;
          color: #989898;
          font-size: 12px;

          > i {
            font-size: 20px;
          }

          &:hover {
            color: #333333;
          }
        }
      }
    }
  }
</style>
